<template>
    
    <el-popover  placement="left" width="1000" trigger="hover" @show="onShow" @hide="onHide" :open-delay="300" class="ml10">
        <div :class="fclass">{{name}}({{code}})</div>
        <div style="min-height:400px;display:flex;flex-direction:row;flex-wrap:nowrap">     
            <img v-if="isShow" :src="realtimesrc" width="500" height="300"/> 
            <img v-if="isShow" :src="klinesrc" width="500" height="300"/> 
        </div>
        <span slot="reference" >
            <a target="_blank" :href="linksrc">
                <span class="fsize" :class="fclass">{{name}}</span>
            </a>
        </span>
    </el-popover>
</template>

<script>
export default {
    props:["code","name","fclass"],
    data() {
        return {
            isShow :false
        }
    },
    computed:{
        linksrc(){
            var code = this.code;
            return 'http://quote.eastmoney.com/bk/90.'+code+'.html';
        },
        realtimesrc(){
            var code = this.code;
            return `http://webquotepic.eastmoney.com/GetPic.aspx?token=44c9d251add88e27b65ed86506f6e5da&nid=90.${code}&type=r&imageType=rf&_=1605506827496&`+Math.random();
        },
        klinesrc(){
            var code = this.code;
            
            return `http://webquoteklinepic.eastmoney.com/GetPic.aspx?token=44c9d251add88e27b65ed86506f6e5da&nid=90.${code}&type=&unitWidth=-6&ef=&formula=RSI&imageType=KXL&_=1605506907496&`+Math.random();
        },

    },
    mounted() {
    },

    methods: {
        onShow(){
            if(this.isShow) return;
            this.isShow=true;
        },
        onHide(){
            this.isShow=false;
        }
    }
}
</script>


